<template>
	<view class="center-box">
		
		<u-navbar back-icon-name="arrow-left" title-size="36" back-text="" :back-icon-size="50" title="选择话题" :title-bold="true">
			<view class="navbar-right" slot="right">
				<view
					class="message-box right-item"
					@click="setTopic"
					style="padding-right: 32rpx; color: #666666;">
					确定
				</view>
			</view>
		</u-navbar>
		
		<view class="search-box">
			<view class="mb40">
					<u-search
						placeholder="添加话题可以获得更多曝光"
						v-model="keyword"
						@change="searList"
						:input-style="inputStyle"
						:show-action="false"
						height="60">
					</u-search>
			</view>
			
			
			<view class="f28" >
				<text style="color: #333333;">已选话题{{itemList.length}}/4</text>
				
				<view v-if="0" class="mt24 f24" style="color: #999;">
					添加高热度话题可以获得更多互动
				</view>
				<view class="mt30">
					<u-tag :text="'#' + item.topic" type="success" color="#333333"
						border-color="#FAF7FA" bg-color="#FAF7FA"
						v-for="(item, index) in itemList" :key="index" 
						@click="removeItem(item)"/>
						
				</view>
				
				<view class="mt50">
					<!-- <view class="" v-if="listInde = 1" >
						<text style="color: #333333;">话题列表</text>
						<view class="flex justify-between align-center h83 border-bom" v-for="(item, index) in listTopic" :key="index">
							<view class="">
								#{{item.topic}}
							</view>
							<view class="">
								{{item.isRecommend}}K
							</view>
						</view>
					</view> -->
					
					
					<view class="">
						<text style="color: #333333;">热门话题</text>
						<view class="flex justify-between align-center h83 border-bom"
							v-for="(item, index) in listTopic" :key="index" @click="addTopic(item)">
							<view class="">
								#{{item.topic}}
							</view>
							<view class="">
								{{item.isRecommend}}K
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			inputStyle: {
				fontSize: '26rpx',
			},
			listTopic: [],
			itemList: [],
		};
	},
	onShow() {},
	onLoad(e) {
		this.getList()
	},
	methods: {
		async getList() {
			const res = await this.$u.get('api/user/topic/list')
			this.listTopic = res.data
		},
		
		async searList() {
			const res = await this.$u.get(`api/user/topic/search/${this.keyword}`)
			this.listTopic = res.data
		},
		
		// 确定选择
		addTopic(item) {
			if (this.itemList.length < 4) {
				this.itemList.push(item)
			} else {
				this.l.msgg('以到上限！')
			}
			console.log(this.itemList)
		},
		
		removeItem(item) {
			this.itemList.splice(this.itemList.findIndex(i => i.id === item.id), 1)
		},
		
		setTopic() {
			uni.setStorageSync('topicelist', this.itemList)
			// this.l.to('/pages/home/release')
			uni.navigateBack({
				delta: 1
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.center-box {
	color: #333333;
	
	view {
		font-family: PingFang SC;
	}
	
	.search-box {
		width: 100%;
		padding: 30rpx;
		
		/deep/.uni-input-input {
		    border-left: 1rpx solid #999999;
			padding-left: 10rpx !important;
		}
		
		/deep/.uni-input-placeholder { 
			padding-left: 10rpx !important;
		}
		
		.u-tag {
			padding: 19rpx 32rpx;
			border-radius: 32rpx;
			margin: 10rpx 10rpx;
		}
		
		.border-bom {
			color: #666666;
			border-bottom: 2rpx solid #F5F5F5;
		}
		
		.border-bom:last-child() {
			border-bottom: 0rpx ;
		}
	}
}
</style>
